<template>
    <div style="">
        <my-simple-table>

            <my-simple-tr label="基础功能">
                <el-date-picker
                        v-model="value"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </my-simple-tr>

            <my-simple-tr label="带快捷选项">
                <el-date-picker
                        v-model="value2"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </my-simple-tr>

            <my-simple-tr label="其他日期单位">
                <div class="block">
                    <span class="demonstration">周</span>
                    <el-date-picker
                            v-model="value1"
                            type="week"
                            format="yyyy 第 WW 周"
                            placeholder="选择周">
                    </el-date-picker>
                </div>
                <div class="block">
                    <span class="demonstration">月</span>
                    <el-date-picker
                            v-model="value2"
                            type="month"
                            placeholder="选择月">
                    </el-date-picker>
                </div>
                <div class="block">
                    <span class="demonstration">年</span>
                    <el-date-picker
                            v-model="value3"
                            type="year"
                            placeholder="选择年">
                    </el-date-picker>
                </div>
                <div class="block">
                    <span class="demonstration">多个日期</span>
                    <el-date-picker
                            type="dates"
                            v-model="value4"
                            placeholder="选择一个或多个日期">
                    </el-date-picker>
                </div>
            </my-simple-tr>

            <my-simple-tr label="选择日期范围">
                <el-date-picker
                        v-model="value2"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        type="daterange"
                        >
                </el-date-picker>
            </my-simple-tr>

            <my-simple-tr label="带快捷选项的日期范围">
                <el-date-picker
                        v-model="value5"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        type="daterange"
                        :picker-options="rangePickerOptions"
                        >
                </el-date-picker>
            </my-simple-tr>

            <my-simple-tr label="选择月份范围">
                <el-date-picker
                        v-model="value5"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        type="monthrange"
                        :picker-options="monthRangePickerOptions"
                        >
                </el-date-picker>
            </my-simple-tr>

        </my-simple-table>
    </div>
</template>

<style>
 .demonstration {
     display: block;
     margin-left: 40px;
     margin-bottom: 10px;
 }
</style>

<script>

    export default {
        name: "my-el-input-number",
        data() {
            return {
                value: '',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '三个月',
                        onClick(picker) {
                            const date = new Date();
                            date.setMonth(date.getMonth() - 3);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                rangePickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                monthRangePickerOptions: {
                    shortcuts: [{
                        text: '本月',
                        onClick(picker) {
                            picker.$emit('pick', [new Date(), new Date()]);
                        }
                    }, {
                        text: '今年至今',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(new Date().getFullYear(), 0);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近六个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setMonth(start.getMonth() - 6);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: '',
                value3: '',
                value4: '',
                value5: '',
                value6: '',
            };
        },
        methods: {}
    }
</script>

